<template>
  <el-row class="container">
<!-- 顶部标题栏 -->
    <el-col :span="24" class="header">
        <el-col :span="16">
            <div class="logo">
              <router-link to="/Welcome">浙江财经大学东方学院讲座管理系统</router-link>
            </div>
            <div class="tools" @click.prevent="collapse" :class="collapsed?'iconfont icon-close':'iconfont icon-caidan'">
			        <span></span>
            </div>
        </el-col>
        <el-col :span="8" class="userinfo">
          <i class="userinner">{{User.userName}}</i> 
          <i class="userinner1">{{User.userDept}}</i>
          <el-dropdown trigger="hover">
				   <span class="el-dropdown-link">
                <i class="icon iconfont icon-shenfenzheng ic"></i>
           </span>
					<el-dropdown-menu slot="dropdown">
						<el-dropdown-item @click.native="me">我的账号</el-dropdown-item>
						<el-dropdown-item  @click.native="rePswd">设置</el-dropdown-item>
						<el-dropdown-item divided @click.native="logout">退出登录</el-dropdown-item>
					</el-dropdown-menu>
				</el-dropdown>
        </el-col>
    </el-col>

    <el-col :span="24" class="main" :class="collapsed?'show':''">
      <!-- 侧边栏 -->
      <aside class="content-sider">
        <el-menu :default-active="navActive"  @select="handleselect" @open="handleOpen" @close="handleClose" unique-opened router>
          <template v-for="(item,index) in menuList">
		  	    <el-submenu :index="index+''">
		  	    <template slot="title">{{item.name}}</template>
		  	    <el-menu-item v-for="child in item.children" :index="child.url" :key="child.url">{{child.name}}</el-menu-item>
		  	  </el-submenu>
		      </template>
        </el-menu>
      </aside>
     
      <div class="content-title">
       {{$route.name}}
      </div>
      <section class="content-container"> 
        <transition name="fade" mode="out-in">
            <router-view></router-view>
        </transition>
	    </section>
      
    </el-col>
    <el-footer class="footer">© 版权所有 Crism 保留一切权利 湘ICP备17011555号</el-footer>
  </el-row>
</template>

<script type="text/ecmascript-6">
import {mapGetters, mapMutations} from 'vuex'
export default {
    data(){
      return{
        User:[],
        collapsed:false,
        menuList: []
      }
    },
    computed: {
      navActive: function(){
        return '/' + this.$route.path.split('/')[1]
      }
    },
    created(){
      this.User = JSON.parse(sessionStorage.getItem('BIGDATA_PLATFORM'))
      this.getUrl()
    },
    methods:{
      getUrl(){
        var _this=this
        this.$ajax.post('/api/getUrl').then(function(response){
          _this.menuList = response.data.data
        }).catch(function(error){console.log(error);}); 
      },
      ...mapMutations({
        setIsShow: 'SET_ISSHOW'
      }),
      logout: function () {
		    var _this = this;
		    this.$confirm('确认退出吗?', '提示', {type: 'warning'}).then(() => {
		      sessionStorage.removeItem('BIGDATA_PLATFORM');
          _this.$router.push('/login');
        }).catch(() => {});
      },
      collapse:function(){
        this.collapsed=!this.collapsed;
      },
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
      handleselect: function (a, b) {
        this.setIsShow(false)
      },
      rePswd:function(){
        var _this = this;
        _this.$router.push('/repswd');
      },
      me(){
        var _this = this;
        _this.$router.push('/me');
      }
  }
}
</script>

<style scoped>
.container {
position: absolute;
top: 0px;
bottom: 0px;
width: 100%;
}
.header {
height: 60px;
line-height: 60px;
background-color: #2b83f9;
background-image: linear-gradient(143deg,#4d70d3, #36a2d7, #8fbaf4);
color:#fff;
}
.logo {
height:60px;
font-size: 20px;
font-family: Microsoft YaHei;
padding: 0 10px 0 20px;
white-space: nowrap;
display: block;
float:left;
}
.logo a{
color:#fff;
text-decoration: none;
}
.logo:hover{
text-decoration: none;
}
.userinfo {
padding-right: 20px;
padding-top: 5px;
line-height: 50px;
text-align: right;
}
.tools{
padding: 0px 5px;
width:40px;
height:60px;
line-height: 60px;
display: none;
float:left;
position: relative;
overflow: hidden;
cursor: pointer;
}
.iconfont{
font-family:"iconfont" !important;font-size:24px;
font-style:normal;
-webkit-font-smoothing: antialiased;
/* -webkit-text-stroke-width: 0.5px; */
-moz-osx-font-smoothing: grayscale;
}
.ic{
    color: #fff;
}
.main {
position: absolute;
top: 60px;
bottom: 0px;
overflow: hidden;
}
.content-sider {
width: 200px;
position: absolute;
top:0;
left:0;
height: 100%;
background: #fff;
border-right:1px solid #e6ebf5;
padding:0px;
transition: left .3s;
overflow-x: hidden;
overflow-y: auto;
z-index: 11;
}

.footer,.content-title{
position:absolute;
background-color: #fff;
right: 0px;
color:#657180;
transition: left .3s;
left:200px;
z-index: 10;
}
.footer{
border-top: 1px solid #e6ebf5;
font-size: 12px;
text-align:center;
bottom:0;
padding-top: 20px;
}
.content-title{
border-bottom: 1px solid #e6ebf5;
/* box-shadow: 2px 2px 0px #F0F0F0; */
height: 40px;
padding:0 20px;
font-size: 14px;
line-height: 40px;
}
.content-container {
position: absolute;
top:40px;
left:200px;
right:0;
bottom: 0;
overflow-x: hidden;
overflow-y: auto;
padding: 20px;
transition: left .3s;
}
.userinner{
top: 15px;
}
.userinner1{
top: -1px;
}
.userinner,.userinner1{
  font-family: Microsoft YaHei;
  font-size: 12px;
  font-style:normal;
  color: #fff;
  position: absolute;
  right: 60px;
  text-align: right;
}
.fade-enter-active, .fade-leave-active {
  transition: opacity .25s
}
.fade-enter, .fade-leave-to /* .fade-leave-active in below version 2.1.8 */ {
  opacity: 0
}
@media (max-width: 750px){
.tools{display: block;}
.content-sider {left: -200px;}
.show{display: block;}
.show > aside{left:0;z-index: 9999;}
.content-title,.content-container,.footer{left: 0px;z-index: 10;}
}
@media (max-width: 480px){
.logo {font-size: 18px;}
}
</style>
